<template>
  <div>
    <van-search :offset-top="50"
      shape="round"
      v-model="value"
      placeholder="请输入小区或地址"
      show-action
      background="#4fc08d"
      @click="$router.push('/city')"
    >
      <template #left
        ><van-icon
          name="arrow-left"
          color="#fff"
          size="30"
          @click="$router.push('/article')"
      /></template>
      <template #label>
        <span class="city">{{ city.label }}</span>
      </template>
      <template #action
        ><van-icon name="location-o" size="25" color="#fff" @click="$router.push('/ditu')"
      /></template>
    </van-search>
    <van-sticky :offset-top="50">
      <van-dropdown-menu class="my-container">
        <van-dropdown-item title="区域" van-overflow-hidden
          ><van-picker
            title="标题"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
          />
          <div class="btn">
            <button @click="onCancel">取消</button>
            <van-button type="primary" size="large" @click="onConfirm"
              >确认</van-button
            >
          </div></van-dropdown-item
        >
        <van-dropdown-item title="方式" van-overflow-hidden
          ><van-picker
            title="标题"
            :columns="nEwColumns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
          />
          <div class="btn">
            <button @click="onCancel">取消</button>
            <van-button type="primary" size="large" @click="onConfirm"
              >确认</van-button
            >
          </div></van-dropdown-item
        >
        <van-dropdown-item title="租金" van-overflow-hidden
          ><van-picker
            title="标题"
            :columns="newColumns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
          />
          <div class="btn">
            <button @click="onCancel">取消</button>
            <van-button type="primary" size="large" @click="onConfirm"
              >确认</van-button
            >
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="筛选" @open="showPopup">
          <!-- <van-cell is-link >展示弹出层</van-cell> -->
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <van-popup v-model="show" position="right" :style="{ height: '100%' }"
      ><div class="shaixuan">
        <h4>123</h4>
        <div><span>123</span></div>
      </div></van-popup
    >
    <div v-for="item in list" :key="item.houseCode">
      <van-card
        :price="item.price"
        :desc="item.title"
        :title="item.desc"
        :thumb="item.houseImg"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { findHouses, AllHouses } from '@/api/find'
export default {
  name: 'MyFind',
  components: {},
  props: {},
  data() {
    return {
      columns: [],
      newColumns: [],
      nEwColumns: [],
      list: [],
      value: '',
      obj: {},
      show: false,
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    const { body } = await AllHouses()
    this.list = body.list
    console.log(this.list)
    const res = await findHouses('AREA|88cff55c-aaa4-e2e0')
    this.obj = res.body
    // console.log(this.obj)
    this.columns = this.obj.price
    this.NewColumns = this.obj.rentType
    this.columns.map((item) => {
      return this.newColumns.push(item.label)
    })
    this.NewColumns.map((item) => {
      return this.nEwColumns.push(item.label)
    })
  },
  methods: {
    onConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel() {
      Toast('取消')
    },
    showPopup() {
      this.show = true
    }
  }
}
</script>

<style scoped lang="less">
.btn {
  display: flex;
  justify-content: space-between;
  button {
    width: 185px;
  }
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.shaixuan {
  width: 200px;
  padding-top: 150px;
  span {
    margin-left: 50px;
  }
}
</style>
